<script setup lang="ts">
import type { IotProductApi } from '#/api/iot/product/product';

import { DICT_TYPE } from '@vben/constants';

import { Card, Descriptions } from 'ant-design-vue';

import { $t } from '#/locales';

import { DeviceTypeEnum } from '#/api/iot/product/product';
import { DictTag } from '#/components/dict-tag';

interface Props {
  product: IotProductApi.Product;
}

defineProps<Props>();

/** 格式化日期 */
const formatDate = (date?: Date | string) => {
  if (!date) return '-';
  return new Date(date).toLocaleString('zh-CN');
};
</script>

<template>
  <Card :title="$t('views.iot.product.product.tabs.productInfo')">
    <Descriptions bordered :column="3">
      <Descriptions.Item :label="$t('views.iot.product.product.name')">
        {{ product.name }}
      </Descriptions.Item>
      <Descriptions.Item :label="$t('views.iot.product.product.category')">
        {{ product.categoryName || '-' }}
      </Descriptions.Item>
      <Descriptions.Item :label="$t('views.iot.product.product.deviceType')">
        <DictTag
          :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE"
          :value="product.deviceType"
        />
      </Descriptions.Item>
      <Descriptions.Item :label="$t('views.iot.product.product.locationType')">
        <DictTag v-if="product.locationType" :type="DICT_TYPE.IOT_LOCATION_TYPE" :value="product.locationType" />
        <span v-else>-</span>
      </Descriptions.Item>
      <Descriptions.Item :label="$t('common.createTime')">
        {{ formatDate(product.createTime) }}
      </Descriptions.Item>
      <Descriptions.Item :label="$t('views.iot.product.product.codecType')">
        {{ product.codecType || '-' }}
      </Descriptions.Item>
      <Descriptions.Item :label="$t('common.status')">
        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="product.status" />
      </Descriptions.Item>
      <Descriptions.Item
        v-if="
          [DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(
            product.deviceType!,
          )
        "
        :label="$t('views.iot.product.product.netType')"
      >
        <DictTag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
      </Descriptions.Item>
      <Descriptions.Item :label="$t('views.iot.product.product.description')" :span="3">
        {{ product.description || '-' }}
      </Descriptions.Item>
    </Descriptions>
  </Card>
</template>
